<template>
  <div>
    <!-- 头部 -->
    <div class="top_tab">
      <div class="left">
      </div>
      <span>分类</span>
      <div class="right">
      </div>
    </div>
    <!-- 主体 -->
    <div class="ifysearch">
       <yd-search v-model="value1" :on-submit="submitHandler"></yd-search>
    </div>  
  <div class="boxsx">
    <div class="bleft">
        <div class="item" @click="yiji(index,item.id)"  v-bind:class="{activs:indexs==index}" v-for="(item,index) in tabsList" :key="index">{{item.name}}</div> 
    </div>
    <div class="bright">
        <div class="imgs" v-for="(item,index) in categoryList" :key="index">
          <div class="son1"><div>{{item.name}}</div> 
                <div>
                <router-link :to='"/product0?id="+item.id+"&wz="+item.name'>
                 查看更多
                </router-link>
                </div> 
          </div>
          <div class="son2">

            <div>
            <router-link :to='"/product0?id="+item.id+"&ye="+item.parent_id+"&wz="+item.name'>
              <img :src="item.icon1" alt="">
            </router-link> 
            </div> 

            <div>
            <router-link :to='"/product0?id="+item.id+"&ye="+item.parent_id+"&wz="+item.name'>
              <img :src="item.icon2" alt="">
            </router-link> 
            </div> 
          </div>
        </div>
    </div>
  </div>
  <div class="ym"></div>
    <!-- 底部 -->
    <div class="tabbarWarp">
      <yd-tabbar class="cy_tabbar" fixed active-color="#e63f3f" color="#999">
        <yd-tabbar-item title="首页" link="/">
          <img slot="icon" src="../assets/index/home-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="分类" link="/classify" active>
          <img slot="icon" src="../assets/index/classify.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="附近" link="/nearby">
          <img slot="icon" src="../assets/index/nearby-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="购物车" link="/information">
          <img slot="icon" src="../assets/index/information-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="我的" link="/mine">
           <img slot="icon" src="../assets/index/mine-hui.png">
        </yd-tabbar-item>
      </yd-tabbar>
    </div>
</div>
  
</template>

<script>
import Vue from "vue";
//
import { ScrollTab, ScrollTabPanel } from "vue-ydui/dist/lib.rem/scrolltab";
Vue.component(ScrollTab.name, ScrollTab);
Vue.component(ScrollTabPanel.name, ScrollTabPanel);
// 底部导航

import { TabBar, TabBarItem } from "vue-ydui/dist/lib.rem/tabbar";
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import { Search } from "vue-ydui/dist/lib.rem/search";
Vue.component(Search.name, Search);
export default {
  name: "classify",
  data() {
    return {
      tabsList:[],
      indexs:0,
      goodList:[],
      categoryList:[],
      gid:'',
      value1:''
    };
  },
  methods: {
    product:function(){
      this.$router.push("/product");
    },
    tabs:function(){ 
      let self = this;
      let url = "/api/goods/tabs";
			self.httpGet(url,function(res) {
				if (res.code == 200) {  
          self.tabsList=res.data
          self.gid = res.data[0].id
          console.log( self.gid )
				} 
      })
    }, 
    yiji:function(v,k){ 
      this.indexs = v
      console.log('VK',v,k)
      let self = this;
      // console.log('fuck',self.gid)
      let url = "/api/goods/category";
      self.categoryList=[];
			self.httpGet(url,function(res) {
				if (res.code == 200) {  
           self.goodList = res.data
           self.categoryList = self.goodList[k] 
				} 
      })
    },
    //搜索
    submitHandler(value) {
      this.$router.push("/product3?title="+value);
    }
  },
  mounted(){
   
  },
  created(){ 
    document.title = "分类"; 
    let self = this;
    this.tabs();
    setTimeout(() => {
      this.yiji(0,self.gid);
    }, 1000); 
    this.$dialog.loading.open('加载中...');
    setTimeout(() => {
       this.$dialog.loading.close();
    }, 1100); 
  }
};
</script>


<style scoped>
.imgs{
  background: #fff;
  padding: .2rem;
}
.son1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: .5rem;
}
.son1>div:nth-child(1){
  color: #333;
  font-size: .25rem;
}
.son1>div:nth-child(2){
  background: #F29B76;
  color: #fff;
  text-align: center;
  font-size: .25rem;
  border-radius: 5px;
  padding: 0 .2rem;
  height: .45rem;
  line-height: .5rem;
}
.son2{
  display: flex;
  margin-top: .2rem;
  justify-content: space-between;
}
.son2>div{
  width: 47%;
}
.son2>div img{
  width: 100%;
  /* height: 1.5rem; */
}
.item{
  text-align: center;
  height: .9rem;
  font-size: .25rem;
  color: #666;
  line-height: .9rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 .1rem;
}
.activs{
  background: #fff; 
  position: relative;
}
.activs::after{
  display: block;
  content: "";
  clear: both;
  position: absolute;
  top: 50%;
  left:0;
  margin-top: -.25rem;
  height: .45rem;
  width: 3px;
  background:#ED6A2E;
  border-radius: 5px; 
}
.boxsx{
  display: flex;
}
.bleft{
  position: fixed;
  top: 2.2rem;
  left: 0;
  width:30%;
  bottom: 1rem;
  background: #DDDDDD;
  overflow-y: auto;  

}
.bright{
  position: fixed;
  top: 2.2rem;
  width: 70%;
  right: 0; 
  bottom: 1rem;
  overflow-y: auto;  

}
.ym{
  height:1rem;
}
.tabbarWarp {
  width: 100%;
  border-top: 1px solid #cccccc;
  position: fixed;
  bottom: 0;
  z-index: 9999999;
}
.cy_tabbar {
  font-size: 0.3rem;
}
.yd-tabbar-icon img {
  width: 0.5rem;
}
.top_tab {
  width: 100%;
  height: 1rem;
  position: fixed;
  padding: 0.2rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}
.top_tab span {
  color: #fff;
  font-size: 0.3rem;
}
.ifysearch {
  padding-top: 1rem;
  height: 1.2rem;
}
.ifytabmian {
  background: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.32rem;
}
.ifytablist {
  width: 50%;
  height: 3.8rem;
  font-size: 0.3rem;
  text-align: center;
  padding: 0.2rem 0;
  color: #999;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.ifytablist:first-child::after {
  position: absolute;
  right: .01rem;
  width: 0.02rem;
  height: 2.5rem;
  display: block;
  content: "";
  clear: both;
  background: #ddd;
  border-radius: 4px;
}
.ifttabtitl {
  height: 0.5rem;
  text-align: left;
  padding-left: 0.2rem;
}
.ifytabmoreb {
  height: 0.5rem;
  line-height: 0.5rem;
  position: relative;
}
.ifytabmore {
  width: 1.52rem;
  height: 0.5rem;
  line-height: 0.5rem;
  background: #f29b76;
  color: #fff;
  border-radius: 0.08rem;
  position: absolute;
  right: 0.2rem;
}
.ifytabimg {
  width: 85%;
  height: 2.5rem;
  margin: 0 auto;
}
.ifytabimg img {
  width: 100%;
  height: 100%;
}
</style>
<style>
.yd-search-input > .search-input {
  height: 0.88rem;
  padding-top: 0;
  font-size: 0.35rem;
  color: #999;
  border-radius: 0.11rem;
  /* line-height:.88rem; */
}
.yd-search-input:after,
.yd-search-input:before {
  display: none;
}
.yd-input-clear {
  background: #ddd;
}
.yd-search-input > .cancel-text {
  display: none;
}
.yd-search-input > .search-input .search-icon:after {
  font-size: 0.4rem;
  color: #000;
}
.yd-search-input > .search-input .search-icon {
  height: 0.88rem;
  background: #dddddd;
}
.yd-input {
  /* height:.88rem; */
}
.yd-search-input {
  /* height:.88rem; */
  background: #f5f5f5;
}
.yd-input > input {
  background: #dddddd;
  height: 0.88rem;
  padding-right: 0.4rem;
  text-align: center;
}
.box .yd-scrolltab {
  top: 2.4rem !important;
  bottom: 1rem !important;
}
.box .yd-scrolltab-nav {
  width: 1.8rem;
}
.box .yd-scrolltab-item {
  color: #999;
  height: 0.9rem;
  padding: 0 0.1rem;
  border: none;
}
.box .yd-scrolltab-active {
  position: relative;
}
.box .yd-scrolltab-title {
  color: #999;
}
.box .yd-scrolltab-active::after {
  position: absolute;
  left: 0;
  top: 54%;
  width: 4px;
  height: 35px;
  margin-top: -20px;
  display: block;
  content: "";
  clear: both;
  background: #ed6b2f;
  border-radius: 4px;
}
.box .yd-scrolltab-content {
  padding: 0;
  margin: 0 0.1rem 0.1rem;
}
.box .yd-scrolltab-content-title {
  display: none;
}
.box .yd-scrolltab-content {
  background: #f5f5f5;
}
.yd-scrolltab-item:after {
  height: 0;
}
</style>
